<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];


    // 请求的流程
    // 1. 创建请求
    // 2. 配置请求相关信息
    // 3. 发送请求
    // 4. 绑定事件 监听服务器响应
    // 5. 获取响应数据 -> 后期处理

    
    getBtn.onclick = function () {
        var wd = "";
        var col = "id";
        var type = "asc";
        var page = 1;
        var size = 10;

        var xhr = new XMLHttpRequest();

        xhr.open("get", `http://121.43.116.41/demo/php/searchGradeOrderLimit.php?wd=${wd}&col=${col}&type=${type}&page=${page}&size=${size}`, true)

        xhr.send();

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var res = xhr.responseText;
                // console.log(res);  // json字符串
                res = JSON.parse(res);
                console.log(res);  // js对象

                // 搜索 => 拿到数据渲染

            }
        }
    }

    postBtn.onclick = function () {
        var user = "a123123";
        var pwd = "123123";

        var xhr = new XMLHttpRequest();

        xhr.open("post", "http://121.43.116.41/demo/php/login.php", true);

        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(`user=${user}&pwd=${pwd}`);

        xhr.onload = function () {

            var res = xhr.responseText;
            // console.log(res);
            res = JSON.parse(res);
            console.log(res);

            var { status, message } = res;

            // if (status) {
            //     location.href = "./index.html";
            // } else {

            // }

        }
    }


</script>

</html>